<template>
    <div class="image_list">
        <div v-for="item in data" :key="item.id" class="item_box" @click="changeMaterial(item)">
            <el-image
                :class="{ icon_radar: item?.is_radar == 1 }"
                :src="item.qr_code_link"
                fit="cover"
                class="qr_code_image">
                <template #error>
                    <el-image
                        src="https://img.static-keyid.cn/toolspace/scrm/2023/09/1694670496752ytir0j1cdpff4wym.png"></el-image>
                </template>
            </el-image>
            <el-tooltip class="box-item" :disabled="disabled" :content="item?.activity_name" placement="top-start">
                <div class="luck_name" :title="item.activity_name" @mouseenter="handleMouse($event)">
                    {{ item.activity_name }}
                </div>
            </el-tooltip>
            <div class="icon_box">
                <img
                    v-if="selectList?.some(el => el.id == item.id)"
                    src="https://img.static-keyid.cn/toolspace/scrm/2023/09/1693986289248fcber26epvebpzes.png"
                    alt="" />
            </div>
        </div>
    </div>
    <div v-if="!props.data?.length" class="empty-box">
        <Empty />
    </div>
</template>
<script setup lang="ts">
import Empty from '../components/Empty.vue';
import { ref, reactive, computed, onMounted, withDefaults } from 'vue';
import { ElMessage } from 'element-plus';
import { isTextBeyond } from '../../utils/index';

interface Props {
    /** 选中数据 */
    modelValue: Array<any>;
    /** table数据 */
    data: Array<any>;
    /** 是否多选 */
    multiple?: boolean;
    /** 选中素材总数 */
    selectTotalNum: number;
    /** 剩余可选中数量 */
    remainNum: number;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    data: () => [],
    remainNum: 0,
    multiple: true,
    selectTotalNum: 9
});

const emit = defineEmits(['update:modelValue']);

const selectList = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const disabled = ref(true);
/**
 * 鼠标移动是否展示tooltips
 * @param e
 */
const handleMouse = e => {
    disabled.value = isTextBeyond(e);
};

/**
 * 选中/取消
 * @param item
 */
const changeMaterial = (item: any) => {
    const index = selectList.value.findIndex(el => el.id == item.id);

    if (props.remainNum <= 0 && index == -1) {
        ElMessage.error(`最多可选${props.selectTotalNum}个素材`);
        return;
    }
    if (props.multiple) {
        if (index == -1) {
            selectList.value.push(item);
        } else {
            selectList.value.splice(index, 1);
        }
    } else {
        selectList.value.splice(0);
        selectList.value.push(item);
    }
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.image_list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .item_box {
        width: 100px;
        height: 120px;
        margin-right: 11px;
        margin-bottom: 12px;
        position: relative;

        .qr_code_image {
            width: 100px;
            height: 100px;
        }

        .luck_name {
            width: 100px;
            font-size: 14px;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .icon_box {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 6px;
            left: 6px;
            background: white;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
                position: absolute;
            }
        }
    }

    .icon_radar {
        position: relative;

        &::after {
            content: '';
            width: 20px;
            height: 20px;
            background: url('https://img.static-keyid.cn/toolspace/scrm/2023/09/1693986312004j1tg8uz6944ojpzu.png')
                no-repeat center;
            background-size: cover;
            position: absolute;
            top: 3px;
            right: 3px;
        }
    }

    .item_box:nth-child(5n) {
        margin-right: 0;
    }
}
.empty-box {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
